{% extends "base.html" %}
{% load staticfiles %}

{% block title %}角色管理{% endblock %}

{% block styles %}
    <style>
        .fixed-table-body {
            height: 70% !important;
        }
    </style>

{% endblock %}

{% block content %}

{#    <section class="content-header">#}
{#        <h1>#}
{#            角色管理#}
{#            <small>{{ allHtml.title }}</small>#}
{#        </h1>#}
{#        <ol class="breadcrumb">#}
{#            <li><a href="#"><i class="fa fa-dashboard"></i>Rbac</a></li>#}
{#            <li class="active">角色列表</li>#}
{#        </ol>#}
{#    </section>#}

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#fa-icons" data-toggle="tab">角色列表</a></li>
                    </ul>

                    <div class="tab-content ">
                        <div class="tab-pane active mailbox-messages" id="fa-icons">
                            <div class=" mailbox-messages">
                                <table class="table table-bordered table-striped table-hover" id="userTable">

                                </table>
                            </div>
                        </div>
                        <div class="tab-pane" id="glyphicons">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- RoleModal content -->
    {#    角色新增和修改#}
    <div class="modal fade" id="modal_backtest_detail" data-backdrop="static">
        <div class="modal-dialog" style="width: 450px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body" style="padding: 30px;height:400px">
                    <form>
                        <div style="margin-top:3%;display: none"><label>角色id</label><input class="opts form-control" id="id"
                                                                                           name="roleid" type="text"
                                                                                           style="display: none"></div>
                        <div style="margin-top:3%"><label>角色名称</label><input class="opts form-control" id="rolename"
                                                                             name="rolename" type="text"
                                                                             placeholder="角色名称"></div>
                        <div style="margin-top:3%">
                            <span style="margin-left:10%;cursor:pointer;padding:5px" class="btn-primary"
                                  onclick="sub(gets)">提交</span>
                            <span style="margin-left:60%;cursor:pointer;padding:5px" class="btn-success"
                                  onclick="quit__()">取消</span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {#    角色删除#}
    <div class="modal fade" id="modal_delete" data-backdrop="static">
        <div class="modal-dialog" style="width: 300px;background-color:#eee">
            <div class="modal-content">
                <div class="modal-body" style="padding:5px;height:150px;overflow:auto">
                    <div>
                        <p style="margin-top:10px;margin-left:5px;">该操作将一并删除用户角色关联、权限角色关联及当前角色的权限数据，是否删除？</p>
                        <div>
                            <span id="del" sid="" onclick="quit__()"
                                  style="padding:2px;cursor:pointer;float:right;margin-right:10px" class="btn-success">取消</span>
                            <span onclick="del_()" style="padding:2px;cursor:pointer;float:right;margin-right:10px"
                                  class="btn-primary">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}


    <script type="text/javascript">
        function gets() {
            data = {
                'id': JSON.stringify($("#id").val()),
                'title': JSON.stringify([$('#rolename').val()]),
            }
            return data;
        }


        function sub(func) {
            data = func();
            if (Boolean(JSON.parse(data['title'])[0]) == false) {
                alert("角色名称不能为空！")
                return;
            }
            $.post("{% url 'Rbac:roles_modify' %}", data, function (r) {
                if (r == 'y') {
                    window.location.href = "{% url 'Rbac:roleList' %}";
                } else {
                    $('#myModal').modal('show');
                    alert(r)
                }
            });
        }

        function modify(id) {
            $('.modal-title').text('修改');
            console.log(id)
            $.get("{% url 'Rbac:roles_modify' %}", {'id': id}, function (r) {
                if (r) {
                    for (var key in r) {
                        console.log(r[key])
                        if ($('#' + key)) {
                            $('#' + key).val(r[key]);
                        }
                    }
                }
            });
        };

        function create() {
            $('.modal-title').text('新建');
            $('.opts').val("");
        };

        function quit__() {
            $('#modal_backtest_detail').modal('hide');
            $('#modal_delete').modal('hide');
        }

        {#function _delete(d) {#}
        {#    $('#modal_delete').modal('show');#}
        {#    $('#del').attr('sid', d);#}
        {# }#}

        function del_(d) {
            {#d = $('#del').attr('sid');//该值是从js动态渲染删除里面拿到的，先_delete，再del_#}
            $.post("{% url 'Rbac:roles_modify' %}", {'id': d, 'delete': 1}, function (r) {
                if (r == 'y') {
                    window.location.href = "{% url 'Rbac:roleList' %}";
                } else {
                    {#$('#myModal').modal('show');#}
                    alert(r)
                    {#window.location.href = "{% url 'Rbac:roleList' %}";#}
                }
            });//post请求的回调函数，空值show"默认合约不可修改"，y值则删除后跳转。
        };

        function InitBootstrapTable(my_url, my_table_id, my_columns, my_filename) {
            $('#' + my_table_id).bootstrapTable('destroy').bootstrapTable({
                url: my_url,
                method: 'get',
                columns: my_columns,
                toolbar: '#toolbar',
                striped: true,
                cache: false,
                pagination: true,
                sortable: true,
                sortOrder: "asc",
                queryParams: function (pageRequest) {
                    return pageRequest;
                },
                sidePagination: "server",
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 25, 50, 100],
                search: true,      //这里的search是bootstrap内置的查询方法，同时可以发给后台做判断  
                strictSearch: false,
                showColumns: true,
                showRefresh: true,
                minimumCountColumns: 2,
                clickToSelect: true,
                uniqueId: "_id",
                showToggle: true,
                cardView: false,
                detailView: false,
                {#showExport: true,#}
                buttonsAlign: "right",
                {#exportDataType: "all",#}
                {#exportTypes: ['excel'],#}
                {#Icons: 'glyphicon-export',#}
                exportOptions: {
                    fileName: my_filename,
                },
            })
        };
        my_columns = [
            {field: "id", title: "角色id", visible: false},
            {#批量操作#}
            {#{#}
            {#    "mDataProp": null,#}
            {#    sWidth: "1%",#}
            {#    'render': function (data, type, full, meta) {#}
            {#        return meta.row + 1 + meta.settings._iDisplayStart;#}
            {#    }#}
            {# },#}
            {#{#}
            {#    title: '<input type="checkbox"  class="selectAllCheck">',#}
            {#    sWidth: "1%",#}
            {#    data: null,#}
            {#    'render': function (data, type, full, meta) {#}
            {#        return '<div><input type="checkbox"></div>';#}
            {#    }#}
            {# },#}
            {title: "角色名称", field: "title"},
            {
                title: "操作",
                field: 'option',
                formatter: function (value, row, index) {
                    return "<span onclick=\"modify('" + value + "')\" class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_backtest_detail'> <i class='fa fa-pencil'></i>修改</span> " + "&nbsp<span onclick=\"del_('" + value + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-pencil'></i>删除</span> ";
                }
            }
        ];
        InitBootstrapTable("{% url 'Rbac:roleList' %}", "userTable", my_columns, "rolelist");
        $('.fixed-table-toolbar').append("&nbsp <span onclick='create()' type='button' class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_backtest_detail'> <i class='fa fa-pencil'></i>新建</span>");

        $('.page-list').css('display', 'none');
        $('.pagination-info').css('display', 'none');
        $('*[placeholder="Search"]').attr('placeholder', '请输入角色名');
    </script>


{% endblock %}